import React, { useEffect, useState } from 'react';
import type { FC } from 'react';
import { useSearchParams } from 'react-router-dom';
import './index.css';
import request from '../../api/axios';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
const ConsultationDetail: FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [detail, setDetail] = useState<any | null>(null);

  useEffect(() => {
    const fetchDetail = async () => {
      if (!id) return;
      try {
        const res = await request.get(`/api/health/share/information/v1/findInformation`, {
          params: { infoId: id }
        });
        setDetail(res?.data?.result || null);
      } catch {
        setDetail(null);
      }
    };
    fetchDetail();
  }, []);

  return (
    <div className="consultation-container consultation-detail-container">
      <div className="consultation-header">
        <div className="consultation-header-left-icon" onClick={() => navigate(-1)}>
          <LeftOutline width={25} height={25} />
        </div>
        <div className="consultation-header-title">咨询详情</div>
        <div style={{ width: '30px' }}>&emsp;</div>
      </div>
      {detail && (
        <div className="consultation-main consultation-detail-main">
          <div className="consultation-detail-title">{detail.title}</div>
          <div className="consultation-detail-meta">
            <span>{detail.author || detail.source || ''}</span>
            <span style={{ marginLeft: '12px' }}>{detail.releaseTime || ''}</span>
          </div>
          <div className="consultation-detail-content" dangerouslySetInnerHTML={{ __html: detail?.content || '' }}></div>
        </div>
      )}
    </div>
  );
};


export default ConsultationDetail;



